<!-- 商品管理-SKU管理 -->
<template>
    <el-card>
        <!-- 商品表格 -->
        <el-table :data="skuArr" border max-height="calc(100vh - 180px)">
            <el-table-column label="序号" type="index" align="center" width="80px">
            </el-table-column>
            <el-table-column prop="skuName" label="名称" width="200px">
            </el-table-column>
            <el-table-column prop="skuDesc" label="描述" show-overflow-tooltip width="200px">
            </el-table-column>
            <el-table-column label="默认图片" width="200px" align="center">
                <template #="{ row, $index }">
                    <el-image v-if="row.skuDefaultImg" :src="row.skuDefaultImg" fit="contain" lazy></el-image>
                    <span v-else>暂无图片</span>
                </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量(g)" width="150px">
            </el-table-column>
            <el-table-column prop="price" label="价格(元)" width="150px">
            </el-table-column>
            <el-table-column label="操作" fixed="right" min-width="250px">
                <template #="{ row, $index }">
                    <el-button :type="row.isSale ? 'info' : 'success'" :icon="row.isSale ? 'ArrowDown' : 'ArrowUp'"
                        size="small" @click="updateSale(row)" v-hasButton="'updown'"></el-button>
                    <el-button type="primary" icon="Edit" size="small" v-hasButton="'update'"></el-button>
                    <el-button type="warning" icon="InfoFilled" size="small" @click="showSkuDetail(row)" v-hasButton="'detail'"></el-button>
                    <el-popconfirm :title="`确认删除 ${row.skuName} ?`" width="250px" @confirm="deleteSku(row.id)" v-hasButton="'remove'">
                        <template #reference>
                            <el-button type="danger" icon="Delete" size="small"></el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
            :background="true" layout="prev, pager, next, jumper, ->, sizes, total" :total="total"
            @size-change="pageNo == 1 ? getSkuList() : pageNo = 1" />
    </el-card>
    <!-- 商品详情 -->
    <el-drawer v-model="drawer">
        <template #header>
            <h1>商品详情</h1>
        </template>
        <template #default>
            <el-descriptions column="1" border label-width="200px">
                <el-descriptions-item label="名称">{{ skuinfo?.skuName }}</el-descriptions-item>
                <el-descriptions-item label="描述">{{ skuinfo?.skuDesc }}</el-descriptions-item>
                <el-descriptions-item label="价格(元)">{{ skuinfo?.price }}</el-descriptions-item>
                <el-descriptions-item label="重量(克)">{{ skuinfo?.weight }}</el-descriptions-item>
                <el-descriptions-item v-if="skuinfo?.skuDefaultImg" label="图片" align="center">
                    <el-image style="height: 200px" :src="skuinfo?.skuDefaultImg" fit="conatin"></el-image>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="平台属性">
                    <el-tag type="primary" v-for="(tag, index) in skuinfo?.skuAttrValueList" :key="index">{{ tag.valueName }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="销售属性">
                    <el-tag type="primary" v-for="(tag, index) in skuinfo?.skuSaleAttrValueList" :key="index">{{ tag.saleAttrValueName }}
                    </el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="商品图片">
                    <el-carousel :interval="5000" type="card" height="250px">
                        <el-carousel-item v-for="item in 6" :key="item">
                            <h3 text="2xl" justify="center">{{ item }}</h3>
                        </el-carousel-item>
                    </el-carousel>
                </el-descriptions-item> -->
            </el-descriptions>
        </template>
    </el-drawer>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { reqSkuList, reqCancelSale, reqOnSale, reqDeleteSku, reqSkuInfo } from '@/api/product/sku'
import type { ResSkuList } from '@/api/product/sku/type'
import type { Sku } from '@/api/product/sku/type'
import { ElMessage } from 'element-plus';
// 当前页码
let pageNo = ref<number>(1)
// 每页数量
let pageSize = ref<number>(10)
// 总页数
let total = ref<number>(0)



// 挂载后获取数据
onMounted(() => {
    getSkuList();
})

// 监听分页器页数变化
watch(() => pageNo.value, () => {
    getSkuList();
})

// sku列表
let skuArr = ref<Sku[]>([])

// 请求获取sku列表
const getSkuList = async () => {
    let result: ResSkuList = await reqSkuList(pageNo.value, pageSize.value)
    if (result.code == 200) {
        skuArr.value = result.data.records;
        total.value = result.data.total;
    }
}

// 设置商品上架下架
const updateSale = async (sku: Sku) => {
    if (sku.isSale) {
        let result = await reqCancelSale(sku.id as number);
        if (result.code == 200) {
            ElMessage.success('下架成功');
            sku.isSale = 0
        }
        else ElMessage.error('下架失败')
    }
    else {
        let result = await reqOnSale(sku.id as number)
        if (result.code == 200) {
            ElMessage.success('上架成功'),
                sku.isSale = 1
        }
        else ElMessage.error('上架失败')
    }
}

// Drawer抽屉组件的显示
let drawer = ref<boolean>(false)
// 商品详情信息
let skuinfo = ref<Sku>()

// 展示商品详情
const showSkuDetail = async (sku: Sku) => {
    skuinfo.value = sku
    drawer.value = true
    //  该获取详情的请求接口有问题，无法使用，故只展示能获取到的数据
    let result = await reqSkuInfo(sku.id as number);
    // console.log(result);
    if (result.code == 200){
        skuinfo.value = result.data
        drawer.value = true
    }
}

// 删除商品
const deleteSku = async (id: number) => {
    let result = await reqDeleteSku(id);
    if (result.code == 200) {
        ElMessage.success('删除成功')
        if (skuArr.value.length < 1) pageNo.value--;
        else getSkuList();
    }
    else ElMessage.error('删除失败')
}

</script>

<style scoped type="scss">
.el-card {
    display: border-box;
    max-height: calc(100vh - 50px);

    .el-table {
        max-height: calc(100vh - 160px);
        margin: 10px 0;

        .el-image {
            height: 100px;
        }
    }
}

.el-tag {
    margin-right: 10px
}

/* .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
} */

/* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
} */
</style>